<template>
  <div>
    <k-form-build
      :value="jsonData"
      ref="KFB"
      @submit="handleSubmit"
    />
    <button @click="getData">提交</button>
  </div>
</template>
<script>
export default {
  name: 'Demo',
  data () {
    return {
      jsonData:
        {
          "list": [
            {
              "type": "input",
              "label": "姓名",
              "options": {
                "type": "text",
                "width": "100%",
                "defaultValue": "",
                "placeholder": "请输入",
                "clearable": false,
                "maxLength": 4,
                "addonBefore": "",
                "addonAfter": "",
                "hidden": false,
                "disabled": false
              },
              "model": "input_1624344491177",
              "key": "input_1624344491177",
              "help": "",
              "rules": [
                {
                  "required": true,
                  "message": "必填项"
                }
              ]
            },
            {
              "type": "select",
              "label": "部门",
              "options": {
                "width": "100%",
                "multiple": false,
                "disabled": false,
                "clearable": false,
                "hidden": false,
                "placeholder": "请选择",
                "dynamicKey": "",
                "dynamic": false,
                "options": [
                  {
                    "value": "1",
                    "label": "技术部"
                  },
                  {
                    "value": "2",
                    "label": "人事部"
                  },
                  {
                    "value": "3",
                    "label": "行政部"
                  }
                ],
                "showSearch": true
              },
              "model": "select_1624344547133",
              "key": "select_1624344547133",
              "help": "",
              "rules": [
                {
                  "required": true,
                  "message": "必填项"
                }
              ]
            },
            {
              "type": "radio",
              "label": "请假类别",
              "options": {
                "disabled": false,
                "hidden": false,
                "defaultValue": "1",
                "dynamicKey": "",
                "dynamic": false,
                "options": [
                  {
                    "value": "1",
                    "label": "事假"
                  },
                  {
                    "value": "2",
                    "label": "病假"
                  },
                  {
                    "value": "3",
                    "label": "婚假"
                  },
                  {
                    "value": "4",
                    "label": "丧假"
                  },
                  {
                    "value": "5",
                    "label": "产假"
                  },
                  {
                    "value": "6",
                    "label": "护理假"
                  },
                  {
                    "value": "8",
                    "label": "其他"
                  }
                ]
              },
              "model": "radio_1624344762389",
              "key": "radio_1624344762389",
              "help": "",
              "rules": [
                {
                  "required": true,
                  "message": "必填项"
                }
              ]
            },
            {
              "type": "date",
              "label": "请假时间",
              "options": {
                "width": "100%",
                "defaultValue": "",
                "rangeDefaultValue": [],
                "range": true,
                "showTime": true,
                "disabled": false,
                "hidden": false,
                "clearable": false,
                "placeholder": "请选择",
                "rangePlaceholder": [
                  "开始时间",
                  "结束时间"
                ],
                "format": "YYYY-MM-DD HH:mm:ss"
              },
              "model": "date_1624344568114",
              "key": "date_1624344568114",
              "help": "",
              "rules": [
                {
                  "required": true,
                  "message": "必填项"
                }
              ]
            },
            {
              "type": "text",
              "label": "1.请假半天可以写0.5不能写0.1,0.2等小数。2.全天假以00:00:00开始以23:59:59结束,下午请假以12:00:00开始",
              "options": {
                "textAlign": "center",
                "hidden": false,
                "showRequiredMark": false,
                "color": "#ff1e02",
                "fontFamily": "SimHei",
                "fontSize": "10.5pt"
              },
              "key": "text_1624344995676"
            },
            {
              "type": "textarea",
              "label": "请假事由",
              "options": {
                "width": "100%",
                "minRows": 4,
                "maxRows": 6,
                "maxLength": null,
                "defaultValue": "",
                "clearable": false,
                "hidden": false,
                "disabled": false,
                "placeholder": "请输入"
              },
              "model": "textarea_1624345076388",
              "key": "textarea_1624345076388",
              "help": "",
              "rules": [
                {
                  "required": true,
                  "message": "必填项"
                }
              ]
            }
          ],
          "config": {
            "layout": "horizontal",
            "labelCol": {
              "xs": 4,
              "sm": 4,
              "md": 4,
              "lg": 4,
              "xl": 4,
              "xxl": 4
            },
            "labelWidth": 100,
            "labelLayout": "Grid",
            "wrapperCol": {
              "xs": 18,
              "sm": 18,
              "md": 18,
              "lg": 18,
              "xl": 18,
              "xxl": 18
            },
            "hideRequiredMark": false,
            "customStyle": ""
          }
        }    }
  },
  methods: {
    handleSubmit(p) {
      // 通过表单提交按钮触发，获取promise对象
      p().then(res => {
        // 获取数据成功
        alert(JSON.stringify(res))
      })
        .catch(err => {
          console.log(err, '校验失败')
        })
    },
    getData() {
      // 通过函数获取数据
      this.$refs.KFB.getData().then(res => {
        // 获取数据成功
        alert(JSON.stringify(res))
      })
        .catch(err => {
          console.log(err, '校验失败')
        })
    }
  }
}
</script>